js实现树级递归,通过js生成tree树形菜单(递归算法)

1、效果图

需求:首先这是一个数据集—js的类型,我们需要把生成一个tree形式的对象 :

var data = [
{ id: 1, name: "办公管理", pid: 0 },
{ id: 2, name: "请假申请", pid: 1 },
{ id: 3, name: "出差申请", pid: 1 },
{ id: 4, name: "请假记录", pid: 2 },
{ id: 5, name: "系统设置", pid: 0 },
{ id: 6, name: "权限管理", pid: 5 },
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 },
];

 id,与pid之间的对应关系,当pid不存在,或pid:0的时候,这一项,应该为树的顶端,那么我们需要去重新建一次索引,怎么建呢,,,以原数据集的id的值,重新生成一个数据如下:

var data = [
	{id: 1, name: "办公管理", pid: 0 ,
		children:[
			{ id: 2, name: "请假申请", pid: 1,
				hildren:[
					{ id: 4, name: "请假记录", pid: 2 },
				],
			},
			{ id: 3, name: "出差申请", pid: 1},
		]
    },
	{id: 5, name: "系统设置", pid: 0 ,
		children:[
			{ id: 6, name: "权限管理", pid: 5,
				hildren:[
					{ id: 7, name: "用户角色", pid: 6 },
					{ id: 8, name: "菜单设置", pid: 6 },
				]
			},
		]
	},
];

js转换为上面数据集,实现数树级递归方法:

<script>
    function toTree(data) {
        // 删除 所有 children,以防止多次调用
        data.forEach(function (item) {
            delete item.children;
        });

        // 将数据存储为 以 id 为 KEY 的 map 索引数据列
        var map = {};
        data.forEach(function (item) {
            map[item.id] = item;
        });
//        console.log(map);
        var val = [];
        data.forEach(function (item) {
            // 以当前遍历项,的pid,去map对象中找到索引的id
            var parent = map[item.pid];
            // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
            if (parent) {
                (parent.children || ( parent.children = [] )).push(item);
            } else {
                //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
                val.push(item);
            }
        });
        return val;
    }
    console.log(toTree(data))
</script>

 

使用jquery,生成上述效果图的完整实例:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title></title>
    <script src="jquery-1.8.3.min.js"></script>
</head>
<body>
 
    <script type="text/javascript">
        $(function () {
            var data = [
            { id: 1, name: "办公管理", pid: 0 },
            { id: 2, name: "请假申请", pid: 1 },
            { id: 3, name: "出差申请", pid: 1 },
            { id: 4, name: "请假记录", pid: 2 },
            { id: 5, name: "系统设置", pid: 0 },
            { id: 6, name: "权限管理", pid: 5 },
            { id: 7, name: "用户角色", pid: 6 },
            { id: 8, name: "菜单设置", pid: 6 },
            ];

            GetData(0, data);
            $("body").append(menus);
        });
 
        //菜单列表html
        var menus = '';
 
        //根据菜单主键id生成菜单列表html
        //id:菜单主键id
        //arry:菜单数组信息
        function GetData(id, arry) {
            var childArry = GetParentArry(id, arry);
            if (childArry.length > 0) {
                menus += '<ul>';
                for (var i in childArry) {
                    menus += '<li>' + childArry[i].name;
                    GetData(childArry[i].id, arry);
                    menus += '</li>';
                }
                menus += '</ul>';
            }
        }
 
        //根据菜单主键id获取下级菜单
        //id:菜单主键id
        //arry:菜单数组信息
        function GetParentArry(id, arry) {
            var newArry = new Array();
            for (var i in arry) {
                if (arry[i].pid == id)
                    newArry.push(arry[i]);
            }
            return newArry;
        }
    </script>
</body>
</html>
  • 28
    点赞
  • 139
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 12
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 12
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

逍遥596607010

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值